<template>
  <div>
    <!--Begin Login Begin-->
    <div class="log_bg">	
        <div class="top">
            <div class="logo"><a href="Index.html">
                <!-- <img src="images/logo.png" /> -->
            <img src="../../../assets/images/logo.png" />
            </a></div>
        </div>
        <div class="regist">
            <div class="log_img"><img src="../../../assets/images/l_img.png" width="611" height="425" /></div>
            <div class="reg_c">
                <form action="">
                <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0" cellpadding="0">

                <tr height="50" valign="top">
                    <td width="95">&nbsp;</td>
                    <td>
                        <span class="fl" style="font-size:24px;">注册</span>
                        <span class="fr">已有商城账号，<router-link style="color:#ff4e00;" to="/login">我要登录</router-link></span>
                    </td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;</td>
                    <td>
                        <!-- <input type="text" v-model="form.loginName" class="l_user" @blur="checkUsername"/> -->
                        <input type="text" v-model="form.loginName" class="l_user"/>
                        </td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                    <td><input type="password" v-model="form.password" class="l_pwd" /></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                    <td><input type="password" v-model="form.password2" class="l_pwd" /></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;真实姓名 &nbsp;</td>
                    <td><input type="password" v-model="form.userName" class="l_user" /></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;性别 &nbsp;</td>
                    <td>
                        <input type="radio" name="sex" value="1" v-model="form.sex" />男
                        <input type="radio" name="sex" value="2" v-model="form.sex" />女
                    </td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;身份证号 &nbsp;</td>
                    <td><input type="text" v-model="form.identityCode" class="l_user" /></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;</td>
                    <td><input type="text" v-model="form.email" class="l_email" /></td>
                </tr>
                <tr height="50">
                    <td align="right"><font color="#ff4e00">*</font>&nbsp;手机 &nbsp;</td>
                    <td><input type="text" v-model="form.mobile" class="l_tel" /></td>
                </tr>
                
                <tr height="50">
                    <td align="right"> <font color="#ff4e00">*</font>&nbsp;验证码 &nbsp;</td>
                    <td>
                        <input type="text" v-model="form.code" class="l_ipt"/>
                        <!-- <a href="JavaScript" style="font-size:12px; font-family:'宋体';" @click="getEmail">获取验证码</a> -->
                        <a href="javascript:;" @click="getEmail"> 
                            {{canSend? '获取验证码':`${countdown}秒后重试` }}
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td style="font-size:12px; padding-top:20px;">
                        <span style="font-family:'宋体';" class="fl">
                            <label class="r_rad"><input type="checkbox" v-model="form.read"/></label><label class="r_txt">我已阅读并接受《用户协议》</label>
                        </span>
                    </td>
                </tr>
                <tr height="60">
                    <td>&nbsp;</td>
                    <td><input type="button" @click="exMsg" value="立即注册" class="log_btn" /></td>
                </tr>
                </table>
                </form>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
    name:"Regist",
    data:function(){
        return {
            form:{
                loginName:'',
                password:'',
                password2:'',
                userName:'',
                sex:'',
                identityCode:'',
                email:'',
                mobile:'',
                code:'',
                read:''
            },
            canSend: true, // 发送邮件能否点击
            countdown: 0,      // 倒计时秒数
        }
    },
    methods: {
        toRegist(addform){
            axios({
                method:'post',
                url:'/easybuy/user/add',
                data:{
                    loginName:addform.loginName,
                    password:addform.password,
                    userName:addform.userName,
                    sex:addform.sex,
                    identityCode:addform.identityCode,
                    email:addform.email,
                    mobile:addform.mobile,
                    code:addform.code,
                }
            }).then(rs=>{
                console.log('注册');
                if(rs.data.code!=200){
                    alert(rs.data.msg);
                    return;
                }
                location = 'http://localhost:8080/';
            })
            
        },
        // checkUsername(){
        //     if(this.form.loginName.trim()==''){
        //         return;
        //     }
        //     axios({
        //         method:'get',
        //         url:'/easybuy/user/getuserbyname',
        //         params:{
        //             'loginName':this.form.loginName
        //         }
        //     }).then(rs=>{
        //         if(rs.data.code!=200){
        //             console.log(rs);
        //             alert("用户名重复")
        //             return ;
        //         }
        //     })
        // },
        getEmail(){//发送邮件
            if(!this.canSend){
                return
            }
            let emailReg = /^[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailReg.test(this.form.email)) {
                alert('请输入正确的邮箱地址');
                return;
            }
            //开始倒计时
            this.canSend=false;
            this.countdown = 60;

            //定时器
            let showtime = setInterval(()=>{
                this.countdown--;
                if(this.countdown<=0){
                    clearInterval(showtime);
                    this.canSend = true;
                }
            },1000)
            console.log("发送邮件");
            axios({
                method:'get',
                url:'/easybuy/user/toemil',
                params:{
                    email:this.form.email
                }
            }).then(rs=>{
                console.log(rs.data.msg);
            })
        },
        //验证验证码
        // excode(){
        //     this.isCode= false;
        //     axios({
        //         method:'get',
        //         url:'/easybuy/user/excode',
        //         params:{
        //             code:this.form.code,
        //             email:this.form.email
        //         }
        //     }).then(rs=>{
        //         this.isCode=rs.data.code==200? true:false;
        //     })
        // },
        exMsg(){//判断是否合理

            const objArr = [
                { id: 'loginName', msg: '用户名' },
                { id: 'password', msg: '密码' },
                { id: 'password2', msg: '确认密码' },
                { id: 'userName', msg: '真实姓名' },
                { id:'identityCode',msg:'身份证号'},
                { id: 'sex', msg: '性别' },
                { id: 'email', msg: '邮箱' },
                { id: 'mobile', msg: '手机号' },
                { id: 'code', msg: '验证码' }
            ];
            for(let i=0;i<objArr.length;i++){
                let id = objArr[i].id;
                if(!this.form[id]?.trim()&&id!='sex'){
                    alert(objArr[i].msg+"不能为空");
                    return;
                }else if(id=='sex'&&this.form.sex==''){
                    alert("性别不能为空");
                    return;
                }
            }
            let pwReg = /^.{6,15}$/;
            if(!pwReg.test(this.form.password)){
                alert('密码长度请在6-15之间');
                return;
            }
            if (this.form.password !== this.form.password2) {
                alert('两次输入的密码不一致');
                return;
            }
            let identReg = /^\d{17}[\dXx]$/;
            if (!identReg.test(this.form.identityCode)) {
                alert('请输入正确的身份证号');
                return;
            }
            let emailReg = /^[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailReg.test(this.form.email)) {
                alert('请输入正确的邮箱地址');
                return;
            }
            let mobileReg = /^1[3-9]\d{9}$/; 
                if (!mobileReg.test(this.form.mobile)) {
                    alert('请输入正确的手机号');
                    return;
            }
            if (!this.form.read) { 
                alert('请阅读并同意用户协议');
                return;
            }
            axios({
                method:'get',
                url:'/easybuy/user/getuserbyname',
                params:{
                    'loginName':this.form.loginName
                }
            }).then(rs=>{
                if(rs.data.code!=200){
                    console.log(rs);
                    alert("用户名重复")
                    return ;
                }
                this.toRegist(this.form);
            })
            
            // console.log("checkUsername=>"+this.checkUsername());
            // console.log("excode=>"+this.excode());
            
        }
    },
}
</script>

<style>

</style>